<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu :default-active="menuActiveName || 'home'" :collapse="sidebarFold" :collapseTransition="false"
        class="site-sidebar__menu">
        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <!-- <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg> -->
          <span v-if="sidebarFold" style="
              color: #fff !important;
              display: block !important;
              font-size: 14px !important;
              width: 20px !important;
              height: 20px !important;
              overflow: inherit !important;
              visibility: inherit !important;
            ">首页</span>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="member" >
          <template slot="title">
            <span v-if="sidebarFold" style="
              color: #fff !important;
              display: block !important;
              font-size: 14px !important;
              width: 20px !important;
              height: 20px !important;
              overflow: inherit !important;
              visibility: inherit !important;
            ">用户管理</span>
            <span>用户管理</span>
          </template>
          <el-menu-item  index="memberList" @click="$router.push({ name: 'm-memberList' })">
            <span slot="title">用户列表</span>
          </el-menu-item>
          <el-menu-item  index="integral" @click="$router.push({ name: 'm-integral' })">
            <span slot="title">积分列表</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="information" v-if="isAuth('information:manager')">
          <template slot="title">
            <span v-if="sidebarFold" style="
              color: #fff !important;
              display: block !important;
              font-size: 14px !important;
              width: 20px !important;
              height: 20px !important;
              overflow: inherit !important;
              visibility: inherit !important;
            ">资讯</span>
            <span>资讯</span>
          </template>
          <el-menu-item v-if="isAuth('information:page')" index="informationList"
            @click="$router.push({ name: 'i-informationList' })">
            <span slot="title">资讯列表</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="recharge" v-if="isAuth('recharge:manager')">
          <template slot="title">
            <span v-if="sidebarFold" style="
              color: #fff !important;
              display: block !important;
              font-size: 14px !important;
              width: 20px !important;
              height: 20px !important;
              overflow: inherit !important;
              visibility: inherit !important;
            ">充值管理</span>
            <span>充值管理</span>
          </template>
          <el-menu-item v-if="isAuth('product:order:page')" index="recharge" @click="$router.push({ name: 'p-recharge' })">
            <span slot="title">充值订单</span>
          </el-menu-item>
          <el-menu-item v-if="isAuth('product:sku:page')" index="classifyList"
            @click="$router.push({ name: 'p-classifyList' })">
            <span slot="title">产品sku</span>
          </el-menu-item>
        </el-submenu>
           <!-- 共享平台端 -->
           <el-submenu index="" v-if="isAuth('ad:manager')">
          <template slot="title">
            <span v-if="sidebarFold" style="
              color: #fff !important;
              display: block !important;
              font-size: 14px !important;
              width: 20px !important;
              height: 20px !important;
              overflow: inherit !important;
              visibility: inherit !important;
            ">商家管理</span>
            <span>商家管理</span>
          </template>
          <el-menu-item v-if="isAuth('ad:page')" index="adList" @click="$router.push({ name: 'm-merchantList' })">
            <span slot="title">商家列表</span>
          </el-menu-item>
          <el-menu-item v-if="isAuth('ad:page')" index="adList" @click="$router.push({ name: 'm-wallet' })">
            <span slot="title">商家钱包</span>
          </el-menu-item>
          <el-menu-item v-if="isAuth('ad:page')" index="adList" @click="$router.push({ name: 'm-join' })">
            <span slot="title">加盟申请</span>
          </el-menu-item>
        </el-submenu>
        <!-- 共享平台端 -->
        <el-submenu index="setUp" >
          <template slot="title">
            <span v-if="sidebarFold" style="
              color: #fff !important;
              display: block !important;
              font-size: 14px !important;
              width: 20px !important;
              height: 20px !important;
              overflow: inherit !important;
              visibility: inherit !important;
            ">系统设置</span>
            <span>系统设置</span>
          </template>
          <el-menu-item index="personnelAdmin" @click="$router.push({ name: 'u-type' })">
            <span slot="title">分类设置</span>
          </el-menu-item>
          <el-menu-item  index="personnelAdmin" @click="$router.push({ name: 'u-staff' })">
            <span slot="title">员工管理</span>
          </el-menu-item>
          <el-menu-item  index="roleAdmin" @click="$router.push({ name: 'u-role' })">
            <span slot="title">职位管理</span>
          </el-menu-item>
          <!-- <el-menu-item
            index="upsd"
            @click="$router.push({ name: 'u-uPassword' })"
          >
            <span slot="title">修改密码</span>
          </el-menu-item> -->
        </el-submenu>
      
        <sub-menu v-for="menu in menuList" :key="menu.menuId" :menu="menu" :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
import { isURL } from '@/utils/validate'
export default {
  data () {
    return {
      dynamicMenuRoutes: [],
      list: []
    }
  },
  components: {
    SubMenu
  },
  computed: {
    sidebarLayoutSkin: {
      get () {
        return this.$store.state.common.sidebarLayoutSkin
      }
    },
    sidebarFold: {
      get () {
        return this.$store.state.common.sidebarFold
      }
    },
    menuList: {
      get () {
        return this.$store.state.common.menuList
      },
      set (val) {
        this.$store.commit('common/updateMenuList', val)
      }
    },
    menuActiveName: {
      get () {
        return this.$store.state.common.menuActiveName
      },
      set (val) {
        this.$store.commit('common/updateMenuActiveName', val)
      }
    },
    mainTabs: {
      get () {
        return this.$store.state.common.mainTabs
      },
      set (val) {
        this.$store.commit('common/updateMainTabs', val)
      }
    },
    mainTabsActiveName: {
      get () {
        return this.$store.state.common.mainTabsActiveName
      },
      set (val) {
        this.$store.commit('common/updateMainTabsActiveName', val)
      }
    }
  },
  watch: {
    $route: 'routeHandle'
  },
  activated () {
    // this.getpz()
  },
  created () {
    this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
    this.dynamicMenuRoutes = JSON.parse(
      sessionStorage.getItem('dynamicMenuRoutes') || '[]'
    )
    this.routeHandle(this.$route)
  },
  methods: {
    getpz () {
      this.$http({
        url: this.$http.adornUrl(
          `/admin/user/getRoleInfo?roleId=` + localStorage.userId
        ),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === '200') {
          let arr = []
          let menuList = data.data.menuList
          menuList.forEach((item, index) => {
            if (item.check) {
              arr.push(item.menuId)
            }
            item.list.forEach((i, x) => {
              if (i.check) {
                arr.push(i.menuId)
              }
            })
          })
          this.list = arr
          // console.log(this.list);
        }
      })
    },
    // 路由操作
    routeHandle (route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter((item) => item.name === route.name)[0]
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(
              (item) => item.name === route.name
            )[0]
            if (!route) {
              return console.error('未能找到可用标签页!')
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
            iframeUrl: route.meta.iframeUrl || '',
            params: route.params,
            query: route.query
          }
          this.mainTabs = this.mainTabs.concat(tab)
        }
        this.menuActiveName = tab.menuId + ''
        this.mainTabsActiveName = tab.name
      }
    }
  }
}
</script>
